<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>非受控组件</title>
</head>

<body>
	<div id="container"></div>

	<script src="../js-react/react@16.development.js"></script>
	<script src="../js-react/react-dom@16.development.js"></script>
	<script src="../js-react/babel@6.min.js"></script>

	<script type="text/babel">

		class Login extends React.Component {

			render() {
				return (
					<form action={this.props.action} onSubmit={this.handleSubmit}>
						用户：<input ref={c => this.username = c} type="text" name="username"/>&nbsp;
						密码：<input ref={c => this.password = c} type="password" name="password"/>&nbsp;
						<button>登录</button>
					</form>
				)
			}

			handleSubmit = (event) => {
				console.log("action:", this.props.action)
				event.preventDefault()	// 阻止事件默认处理方式 ==> 此处为表单提交
				const {username, password} = this
				alert(`您输入的用户名是:${username.value}，密码是:${password.value}`)
			}
		}

		ReactDOM.render(<Login action="https://www.baidu.com"/>, document.getElementById('container'))
	</script>
</body>

</html>